import React from 'react'
import TopNavict from "../compoments/TopNavict";
import { Carousel } from 'antd';
import { useNavigate } from 'react-router-dom'
import Title from '../compoments/title';
import "./styles/index.css"
import BottomBavict from '../compoments/bottomnav';

const imgs = [{
    url :"https://jimucake.com/runtime/_thumb/upload/2022/12/24/600_600_20221224113542257.jpg",
    act_url:'https://jimucake.com/pic/thumb/img/upload@_@2023@_@05@_@24@_@20230524103102667.jpg/w/270/h/230',
    id :1
},{
    url:"https://jimucake.com/runtime/_thumb/upload/2022/07/28/600_600_20220728160127764.jpg",
    act_url:'https://jimucake.com/pic/thumb/img/upload@_@2023@_@08@_@15@_@20230815144841886.jpg/w/270/h/230',
    id:2
},{
    url:"https://jimucake.com/runtime/_thumb/upload/2022/05/13/600_600_20220513170229191.jpg",
    act_url:'https://jimucake.com/pic/thumb/img/upload@_@2022@_@05@_@13@_@20220513170229767.jpg/w/270/h/230',
    id:3
},{
    url:'https://jimucake.com/runtime/_thumb/upload/2023/05/24/600_600_20230524103102776.jpg',
    act_url:'https://jimucake.com/pic/thumb/img/upload@_@2023@_@05@_@24@_@20230524103102667.jpg/w/270/h/230',
    id:4
}
]

const news = [
    {
        url:"https://jimucake.com/pic/thumb/img/upload@_@2024@_@04@_@22@_@20240422130845617.jpg/w/240/h/200",
        head:"【至关重要的30分钟。（冰淇淋特惠）】",
        content:"吃Gelato冰淇淋，要更加在意时间和温度。",
    },{
        url:"https://jimucake.com/pic/thumb/img/upload@_@2024@_@04@_@22@_@20240422130707830.jpg/w/240/h/200",
        head:"【！我们快了一点（送块春天）】",
        content:"即日起，积慕蛋糕商城专区上新两小时快速送达",
    }
]


const Index = () => {
    const navigate = useNavigate();
    const toIndex = () => {
        navigate("/")
    }
    return (
        <div className="app">
            <div className="nav">
                <TopNavict />
            </div>
            <div className='carousel'>
                <Carousel autoplay>
                    <div className='car-img' onClick={toIndex}>
                        <img className='ca-img-t' src="https://jimucake.com/upload/2024/01/12/20240112011202457.jpg" alt="" />
                    </div>
                    <div className='car-img' onClick={toIndex}>
                        <img className='ca-img-t' src="https://www.jimucake.com/upload/2023/08/17/20230817100134296.jpg" alt="" />
                    </div>
                </Carousel>
            </div>
            <div className='contact'>
                <Title name={"人气推荐 HOT SALES"} />
                <div className='goods'>
                    {imgs.map((item)=>(
                        <div key={item.id} className='goods-item'>
                            <div className='img-ori'>
                                <img className='goods-img img-opacity' src={item.url} alt="" />
                                <img className='goods-img act-img' src={item.act_url} alt="" />
                            </div>
                        </div>
                    ))}
                </div>
                <Title name={"最新动态 THE NEWS"} />
                <div className='goods'>
                    {news.map((item,index)=>(
                        <div key={index}>
                            <div className='news-item'>
                                <div className='news-url'>
                                    <img src={item.url} alt="" />
                                </div>
                                <div className='news-info'>
                                    <div className='news-head'>
                                        {item.head}
                                    </div>
                                    <div className='news-txt'>
                                        {item.content}
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            <div>
                <BottomBavict></BottomBavict>
            </div>
        </div>
    )
}

export default Index